<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收银台</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/checkout.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/checkout.js"></script>
</head>
<body>
<div class="indexBlurId">
    <!-- =====背景===== -->
    <div class="page-inner">
        <div class="page-inner-wrap">
            <!-- =====标题======= -->
            <div class="head-info">
                <div class="head-info-left">
                    <a href="#"></a>
                    <span>收银台</span>
                </div>
                <div class="head-info-right">
                        <span class="user-name">
                            <a href="../personal/person.html">jd_123456ghhg</a>
                        </span>
                    <span class="split">|</span>
                    <span class="myorder">
                            <a class="wodedingdan" href="">我的订单</a>
                        </span>
                </div>
            </div>
            <!-- =========支付页面========= -->
            <div class="index-content">
                <div class="ic-inner">
                    <!-- ==========  订单提交成功  ========== -->
                    <div class="order-info">
                        <div class="float-left">
                            <div class="float-left-inner">
                                <div class="submit">
                                    订单提交成功，请尽快付款！订单号:
                                    <span class="myorderNumber">${order.myorderNumber}</span>
                                </div>
                                <div class="limit-time">
                                    请您在
                                    <span class="count-down">
                                            <span>22时</span>
                                            <span>29分</span>
                                            <span>23秒</span>
                                        </span>
                                    内完成支付，否则订单会被自动取消
                                </div>
                            </div>
                        </div>
                        <div class="float-right">
                            <em>应付金额</em>
                            <strong class="pay-price">${order.myorderPrice}</strong>
                            <em>元</em>
                        </div>
                    </div>
                    <!-- ================ 订单支付方式  ============== -->
                    <div class="index-channel">
                        <div class="channel-top"></div>
                        <div class="channel-content">
                            <div class="pay-channel">
                                <div class="pay-channel-inner">
                                    <span class="pay">闪电支付</span>
                                    <!-- 支付宝 微信支付 -->
                                    <table class="payment_table">
                                        <tbody>
                                        <tr>
                                            <td>
                                                <a href="javascript:" onclick="choosePayType(this,'ALIPAY')" class="selPayType1 current">
                                                    <img src="${pageContext.request.contextPath}/images/checkout-zhifubao.svg" title="支付宝" width="140" height="40">
                                                    <span>支付宝支付</span>
                                                </a>
                                            </td>
<%--                                            <td>--%>
<%--                                                <a href="javascript:" onclick="choosePayType(this,'WECHAT')" class="selPayType1">--%>
<%--                                                    <img src="images/checkout-weixin.svg" title="微信支付" width="140" height="40">--%>
<%--                                                    <span>微信支付</span>--%>
<%--                                                </a>--%>
<%--                                            </td>--%>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <!-- =================  支付收款码  ================== -->
                                    <div class="panel-body pay_recommend">
                                        <p style="padding:15px;;">推荐支付宝扫码支付:</p>
                                        <div class="scan_code">
                                            <img name="alipayScanIframe" class="scan-ma-img" src="${pageContext.request.contextPath}/images/checkout-ma.png" width="103" height="103" frameborder="0"scrolling="no" style="height: 103px;width:103px; border:1px solid #aaa;background-size: 100%;"></iframe>
                                            <img class="scan" src="${pageContext.request.contextPath}/images/checkout-saoma.svg" alt=""width="37" height="37">
                                            <div class="scan_text">
                                                <span>打开手机支付宝</span><span>扫一扫继续付款</span>
                                            </div>
                                            <span class="operation" style="background: url(images/detail_love.svg) right center no-repeat;">操作演示</span>
                                            <div class="hide1" style="display:none;">
                                                <img class="step1" src="${pageContext.request.contextPath}/images/step1.gif" alt="">
                                                <img class="step3" src="${pageContext.request.contextPath}/images/middle.png" alt="">
                                                <img class="step2" src="${pageContext.request.contextPath}/images/step2.gif" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 推荐支付宝支付结束 -->
                                </div>
                            </div>
                            <!-- =========  立即支付  ========== -->
                            <div class="pay-botton">
                                <div class="address">${addressDetail}</div>
                                <div class="button-inner">
                                    <a href="" class="payOrderNow">立即支付</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="index-plate-form"></div> -->
                </div>
            </div>
            <!-- =========商家提示页面========= -->
            <div class="index-bottom">
                <div class="hr"></div>
                <div class="bottom-inner">尊敬的用户您好，感谢您购买本平台的产品，祝您本次购买愉快。</div>
            </div>
        </div>
    </div>
</div>
<script>
    var subjectValue = $(".pay").text();
    var traceNoValue = $(".myorderNumber").text();
    var totalAmountValue = $(".pay-price").text();
    $(".payOrderNow").attr("href","${pageContext.request.contextPath}/alipay/pay?subject="
                            +subjectValue+"&traceNo="+traceNoValue+"&totalAmount="+totalAmountValue);

    var token = localStorage.getItem("token")
    $(".wodedingdan").attr("href","/demo/getAllOrders/" + token);

</script>
<script type="text/javascript">
    $(function() {
        var ws;
        if ("WebSocket" in window) {
            ws = new WebSocket("ws://localhost:8081/demo/webSocket/" + 2);
        }
        //接收到服务端消息时触发
        ws.onmessage = function (evt) {
            let received_msg = evt.data;
            var result = confirm(received_msg);
            if(result){
                //console.log("选择确定")
                window.location.href="${pageContext.request.contextPath}/personal/myOrder.jsp";
            }
        };
    })
</script>
</body>
</html>
